@charset "UTF-8";
/**
 * (X)HTML/CSS based on YAML Framework
 *
 * (en) central stylesheet - layout example "standard"
 *
 * @copyright       Copyright 2010, Tuan NAT
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @version         1.0
 */

@media screen, projection {

body { overflow-y:scroll; }

/*------------------------------------------------------------------------------------------------------*/

  body {
    background:#d4d4d4;
    padding:0;
}

body { text-align:center; }

.page_margins {
    text-align:left;
    margin:0 auto;
}

.page_margins {
    width: 980px;
    background:#E3E3E3;
}

.page { padding: 0 0 0 27px; }

#header {
    color:#000;
    background:#ebebeb repeat-x top left;
    padding: 0;
    height: 418px;
}

#header #banner { display:block; }

#topnav {
    color:#aaa;
    background:transparent;
}

#nav ul { margin-left:20px; }

#wrap {
    background:#E3E3E3;
    padding:30px 0 0;
}

#footer {
    color:#000;
    background:#bcbbb9;
    padding:10px 20px;
    line-height:1.5em;
}

/*------------------------------------------------------------------------------------------------------*/

  #sidebar {
    width: 312px;
    float: left;
}

#sidebar_content { padding: 0 0 10px; }

.main {
    background: #f4f4f4;
    margin:0 0 0 312px;
}

.main_content { padding: 0 27px 0 22px; }

/**
  * ------------------------------------------------------------------------------------------------- #
  *
  */

  #header h1 {
    font-weight:bold;
    font-size:2.5em;
    letter-spacing:-2px;
    line-height:65%;
    color:#000;
}

#header span { color:#999; }

#topnav a {
    color:#999;
    font-weight:normal;
    background:transparent;
    text-decoration:none;
}

#topnav a:focus, #topnav a:hover, #topnav a:active {
    text-decoration:underline;
    background-color:transparent;
}

#sidebar .sidebar-top {
    width: 304px;
    padding: 20px 0 0;
    background: url(../../images/side-bar-top.png) no-repeat center top;
    display: block;
}

#sidebar .sidebar-bottom {
    width: 272px;
    min-height: 600px;
    padding: 0 16px 20px;
    background:url(../../images/side-bar-bottom.png) no-repeat center bottom;
    display: block;
}

#sidebar .sidebar {
    width: 304px;
    padding: 0;
    margin-top: -4px;
    background: url(../../images/sidebar-bg.png) repeat-y center top;
    display: block;
}

#sidebar .title {
    text-indent: -2000px;
    background: url(../../images/tag_product.png) no-repeat center top;
    height: 45px;
}

#sidebar .block { padding: 20px 0 0; }

#sidebar .block .img {
    float: left;
    width: 122px;
    height: 108px;
}

#sidebar .block .text {
    float: right;
    width: 150px;
    height: 108px;
}

#sidebar .block .text p {
    color: #fff;
    padding: 45px 11px 0 14px;
}

#sidebar .block .packing { background: url(../../images/packing-title.png) no-repeat left top; }

#sidebar .block .chemical { background: url(../../images/chemical-title.png) no-repeat left top; }

#sidebar .block .cleaning { background: url(../../images/cleaning-title.png) no-repeat left top; }

.main .col2 { padding: 20px 0 0; }

.main .col2 .left {
    width: 270px;
    float: left;
}

.main .col2 .right {
    width: 270px;
    float: right;
}

.box { }

.box .cufon_title { float: left; width: 100%; border-bottom: 1px solid #999; margin-bottom: 15px; position: relative; display: block; }
.box .cufon_title .inner { float: left; margin-bottom: -5px; padding: 0 5px 0 0; position: relative; background-color: #f4f4f4;}
.box .cufon_title .inner.welcome { width: 155px; }
.box .cufon_title .inner .icon { float: left; padding: 0 5px 0 0; }
.box .cufon_title h2 { font-size: 18px; color: #999; margin: 4px 0 0; }
.box .cufon_title h3 { font-size: 25px; color: #cc6600; margin: 0px 0 0; text-transform:uppercase;}
.box .cufon_title h3 a { text-decoration: none;}

.box .contact_tilte { float: left; width: 100%; padding: 0 0 15px; }
.box .contact_tilte h2 { margin: 0; }
.box .contact_tilte span { font-weight: bold; color: #cc6600; }
.box .contact_tilte .inner { }
.box .contact_tilte .inner .icon { float: left; padding: 0 5px 0 0; }

.box.news { }

.box.news ul { margin: 0; list-style: none; float: left; width: 100%; }
.box.news ul li { margin: 0 0 10px; background: url(../../images/folder-icon.png) no-repeat 13px 2px; padding: 0 0 0 35px; }
.box.news ul li a { color: #222; text-decoration: none; }

.box.listimg { }

.box.listimg ul { margin: 0; list-style: none; float: left; width: 100%; }
.box.listimg ul li { list-style-type: none; margin: 0; float: left; padding: 10px 0; }
.box.listimg ul li.center { padding: 10px 25px; }
.box.listimg ul li a { display: block; width: 69px; height: 59px; border: 2px solid #d2ddee; }
.box.listimg ul li a.select, .box.listimg ul li a:hover { border: 2px solid #cc6600; }

#footer .bottomnav { text-align: center; padding: 5px; }
#footer .bottomnav ul { list-style: none; margin: 0; }
#footer .bottomnav ul li { list-style-type: none; margin: 0; display: inline; padding: 0 10px; border-right: 1px solid #cc6600; }
#footer .bottomnav ul li.last { border-right: none; }
#footer .bottomnav ul li a { color: #222; text-decoration: none; }
/**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Skiplinks
  *
  * @section content-skiplinks
  */

  #skiplinks a.skip:focus, #skiplinks a.skip:active {
    color:#fff;
    background:#333;
    border-bottom:1px #000 solid;
    padding:10px 0;
    text-decoration:none;
}
/**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Paginator
  */
.paginator { margin: 0 auto; text-align: center; }
.paginator span { margin: 0px 10px 0px 0px; }
.paginator a { text-decoration: underline; text-align: center; margin: 0px 5px 0px 0px; line-height: 20px; color: #CC6600; }
.paginator span.t_a_ui_active { background-color: #CC6600; padding: 6px 8px; line-height: 9px; height: 9px; width: 7px; }

}
